<!DOCTYPE html>
<title>Media Controls: volume slider accessibility tests</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video controls></video>
<script>
async_test(t => {
  // Ensure that we will show the volume slider.
  setPreferHiddenVolumeControlsForTest(t, false);

  assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled);

  var video = document.querySelector('video');
  video.src = '../content/test.ogv';

  video.onloadedmetadata = t.step(function() {

    var volume_slider = volumeSliderElement(video);
    assert_not_equals(volume_slider, null);

    assert_equals(volume_slider.getAttribute('aria-label'), 'volume');
    assert_equals(volume_slider.getAttribute('aria-valuemin'), '0');
    assert_equals(volume_slider.getAttribute('aria-valuemax'), '100');
    assert_equals(volume_slider.getAttribute('aria-valuenow'), '100');

    // Trigger events that will update the timeline internal state.
    video.volume = 0.54;
    video.onvolumechange = t.step_func_done(function(event) {
      assert_equals(volume_slider.getAttribute('aria-valuenow'), '54');
    });
  });
});
</script>
